<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<title>掌上小鑫鑫-五金查询平台</title>
		<meta name="description" content="掌上小鑫鑫(鑫鑫(www.xiaoxx.net)是专门)是专门为五金行业打造的信息化平台，操作简洁，一键式搜索。给客户提供五金类产品信息服务，在小鑫鑫平台上搜索五金产品，查看商家主营信息，一键拨打商家电话订货。为五金采购者提供商家信息对接。包括五金产品供应,五金产品采购,五金企业招商,五金配件等信息,是中国五金采购的必备掌上平台">
		<meta name="keywords" content="五金,小鑫鑫,五金建材,五金批发,五金查询,五金工具,机械设备,日用五金,五金耗材,劳保用品,五金企业,五金采购">
		<link rel="shortcut icon" sizes="16x16" href="./images/weixin/icon.jpg">
		<link rel="stylesheet" href="css/weixin/mui.min.css">
		<link rel="stylesheet" type="text/css" href="css/weixin/style.css">
		<!--<script src="js/weixin/vue.js"></script>-->
		<script src="https://cdn.bootcss.com/vue/1.0.10/vue.js"></script>
		<script src="js/weixin/mui.min.js"></script>
		<style type="text/css">
			#zhao {
				min-height: 100%;
				padding-bottom: 20px;
				height: auto;
			}
			
			.pos {
				position: initial;
				width: 60%;
				margin: 0 auto;
			}
			
			[v-cloak] {
				display: none!important;
			}
			
			#slider {
				display: none;
			}
		</style>
	</head>

	<body bgcolor="#f4f4f4">
		<div id="app">
			<header class="mui-bar mui-bar-nav putong">
				<h1 class="mui-title">小鑫鑫</h1>
			</header>
			<div class="gun">
				<div id="slider" class="mui-slider">
					<div class="mui-slider-group mui-slider-loop">
						<div class="mui-slider-item mui-slider-item-duplicate">
							<a href="javascript:;" @click="xiangqing(lastObj.sellerId)">
								<img :src="PICURL+lastObj.src">
							</a>
						</div>
						<div class="mui-slider-item" v-for="value in advert" :key="value.id">
							<a href="javascript:;" @click="xiangqing(value.sellerId)">
								<img :src="PICURL+value.src">
							</a>
						</div>
						<div class="mui-slider-item mui-slider-item-duplicate">
							<a href="javascript:;" @click="xiangqing(firtsObj.sellerId)">
								<img :src="PICURL+firtsObj.src">
							</a>
						</div>
					</div>
					<div class="mui-slider-indicator">
						<div class="mui-indicator mui-active"></div>
						<div class="mui-indicator" v-for="value in advert" :key="value.id"></div>
					</div>
				</div>
				<div class="sousuo">
					<div class="sousuo-border" @click="run()">
						<div style=" width:90%;float:left;">
							<input type="text" placeholder="请输入查询商品信息，例:焊丝" readonly="">
						</div>
						<div style=" width:10%;float:left;">
							<input type="image" src="images/weixin/icon001.png" style="float:right; background:#607282; border:none; width:40px; height:40px;">
						</div>
					</div>
					<div class="rmcx" id="rmcx">热门查询：
						<!--<a href="#" v-for="value in remen" @click="tiao(value)" v-text='value'></a>-->
						<a href="#" v-for="value in remen" :data-zi="value" v-text='value'></a>
					</div>
				</div>
				<div class="guanzhu" v-if="qrPath">
					<img id="img" :src="PICURL+qrPath" width="180" height="180">
					<p class="an">长按保存二维码，微信扫码收藏</p>
				</div>
			</div>
		</div>

	</body>

</html>

<script type="text/javascript">
	mui.init({
		gestureConfig: {
			hold: true, //默认为false
		}
	});
	var app = new Vue({
		el: '#app',
		data: {
			advert: [],
			firtsObj: '',
			lastObj: '',
			qrPath: '',
			PICURL: String,
			remen: ['五金', '机电', '劳保', '阀门', '标准件']
		},
		methods: {
			//			tiao: function(key) {
			//				localStorage.setItem("KEY", key);
			//				mui.openWindow({
			//					url: 'serch_list.html',
			//					id: 'serch_list.html',
			//				});
			//			},
			run: function() {
				mui.openWindow({
					url: 'serch.html',
					id: 'serch.html',
				});
			},
			xiangqing: function(id) {
				if(id !== null) {
					mui.openWindow({
						url: 'xiangqing.html',
						id: 'xiangqing.html',
					});
					localStorage.setItem('ID', id);
				}
			}
		}
	})
	
	window.onload = function() {
		mui.plusReady(function() {
			setTimeout(function() {
				document.getElementById("img").addEventListener("hold", function() {
					console.log(11111111111)
					savePicture();
				});
			}, 500)
			getlunbo()
		})

	}

	mui("#rmcx").on('tap', 'a', function(event) {
		localStorage.setItem("KEY", this.getAttribute("data-zi"));
		mui.openWindow({
			url: 'serch_list.html',
			id: 'serch_list.html',
		});
	});

	//获取轮播数据
	function getlunbo() {
		mui.ajax(URL + 'indexAction!advertPic', {
			data: {

			},
			dataType: 'json', //服务器返回json格式数据
			type: 'post', //HTTP请求类型
			timeout: 10000, //超时时间设置为10秒；
			success: function(data) {
				app.PICURL = PICURL;
				var getData = data.data[0]; //总数据
				app.advert = getData['advert']; //轮播数据
				app.qrPath = getData['comp'][0]['qrPath']; //二维码
				mui('#slider')[0].style.display = 'block';
				app.firtsObj = getData['advert'][0];
				app.lastObj = getData['advert'][getData['advert'].length - 1];
				setTimeout(function() {
					var gallery = mui('#slider');
					gallery.slider({
						interval: 2000 //自动轮播周期，若为0则不自动播放，默认为0；
					});
				}, 200)
			},
			error: function(xhr, type, errorThrown) {
				console.log(xhr)
			}
		});
	}

	// 保存图片到相册中 

	function savePicture() {
		// 创建下载任务
		picurl = "http://www.xiaoxx.net//gypupload/advertimage/20181110/24f0b894-1533-4094-bbf4-d38820c81e8f.jpg";
		//图片保存到手机后的路径
		picname = "_downloads/24f0b894-1533-4094-bbf4-d38820c81e8f.jpg";
		var dtask = plus.downloader.createDownload(picurl, {}, function(d, status) {
			console.log(JSON.stringify(d), status)
			// 下载完成
			if(status == 200) { 
				plus.gallery.save(picname, function() { //保存到相册方法
					mui.toast('已保存到手机相册');
				}, function() {
					mui.toast('保存失败，请重试！');
				});
			} else {}
		});
		dtask.start(); //开始下载
	}
</script>